<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<TITLE>H5R framework demo: flappy birds clone</TITLE>
		<SCRIPT type="text/javascript" src="H5R.js"></SCRIPT>
	</HEAD>
	<BODY>
		<DIV id="stage" style="width: 640px; height: 480px;"></DIV>
		<SCRIPT type="text/javascript">
			var isCollision = function(a, b){
				return !(a._x >= b._x + b._width ||
						a._y >= b._y + b._height ||
						b._x >= a._x + a._width ||
						b._y >= a._y + a._height);
			};
						
			var TS = {
				"bird": { //size: 64x48
					img: {
						src: "bird.png",
						sprites: 3,
						fps: 8,
					},
				},
				"background": {
					img: "background.png",
				},
				"brick": { // size: 16x16
					img: "brick.png",
				},
			};
			
			var SG = {
				bg: {
					_img: "background",
				},
				bricks: [],
				bird: {
					_x: 32,
					_y: 64,
					_img: "bird",
					_width: 64,
					_height: 64,
					vY: 0,
				},
				score: {
					value: 0,
				}
			};
			
			var storedSG = JSON.stringify(SG);
			
			var sceneBounds = {
				_x: 0,
				_y: 0,
				_width: 680, //added more space so spawned gates would not disappear immediately
				_height: 480
			};
		
			var R = new H5R();
			R.addStage(new H5R.Stage("stage"));
			R.setScenegraph(SG);
			
			var die = function(){
				//show score and restart when player dies
				alert("You died! Final score: " + SG.score.value);
				R.stop();
				SG = JSON.parse(storedSG);
				R.setScenegraph(SG);
				play();
			};
			
			var play = function(){
				R.start();
				SG.score._render = function(self, ctx){
					//display score on screen
					ctx.font = 'italic 20pt Calibri';
					ctx.fillText('Score: ' + self.value, 20, 40);
				};		
				SG.bird._update = function(self, dT, time){
					//bird gravity
					self.vY += 20 * dT * 0.005;
					var dY = self.vY * dT * 0.005;
					self._y += dY;
				};
				SG._update = function(self, dT, time){
					//add new gate when necessary
					if(SG.bricks.length < 1 || SG.bricks[SG.bricks.length-1].top._x <= 432){
						var x = 664;
						if(SG.bricks.length > 0){
							x = SG.bricks[SG.bricks.length-1].top._x + 192;
						}
						var gatePosition = (Math.random()*8)|0;
						SG.bricks.push({
							top:{
								_img: "brick",
								_x: x,
								_y: 0,
								_repeatX: 2,
								_repeatY: 4+gatePosition
							},
							bottom:{
								_img: "brick",
								_x: x,
								_y: (12+gatePosition)*16,
								_repeatX: 2,
								_repeatY: 18-gatePosition
							},
							scored: false,
							_update: function(self, dT, time){
								//move gate
								var newX = self.top._x - dT*0.1;
								self.top._x = newX;
								self.bottom._x = newX;
								//score when gate is passed
								if(newX <= 48 && !self.scored){
									SG.score.value++;
									self.scored = true;
								}
							},
						});
					}
					//check collisions
					if(SG.bricks.length > 0){
						//remove gate when out of screen
						if(!isCollision(SG.bricks[0].top, sceneBounds)) SG.bricks.shift();
					}
					if(!isCollision(SG.bird, sceneBounds)){
						//player vs. scene bounds
						die();
					}
					for(var i = 0; i < SG.bricks.length; i++){
						//player vs. gates
						if(isCollision(SG.bricks[i].top, SG.bird)) die();
						if(isCollision(SG.bricks[i].bottom, SG.bird)) die();
					}
				};
				
				window.onclick = function(){
					SG.bird.vY = -50;
				};
			};
			
			R.setTileset(TS, function(){
				play();
			});
		</SCRIPT>
	</BODY>
</HTML>